<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../myCss/commes.css" />
    <link rel="stylesheet" href="../../myCss/photoswipe.css"/>
    <link rel="stylesheet" href="../../myCss/default-skin/default-skin.css"/>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />

    <style>
        .aui-list .aui-list-item-title{
            font-size: 12px;
        }
        .disc{
            text-align: center;
            padding-bottom:4px ;
            font-size:17px;
            background: #fff;

        }
        .d1{
            color: rgba(41, 179, 166, 0.95);
        }
        .aui-list textarea{
            font-size: 15px;
            font-family: 微软雅黑;
            color: #5a5a5a;
            height: 40px;
            margin: 0;
        }
        .z_photo {
            width: 100%;
            padding-bottom: 12px;
            overflow: auto;
            clear: both;
            margin: auto;
            background: #fff;
            border: 0;
        }
        .money span{
            font-family: 黑体;
            font-weight: bold;
            font-size: 14px;
            color: #5d5d5d;
        }
       .money input{
            font-size: 13px;
            color: #656565;
        }
        .time span{
            font-size: 13px;
        }
        .time label{
            font-size: 13px;
            color: #666666;
        }
        /*遮罩层*/

        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }

        .z_alert {
            width:170px;
            height: 100px;
            border-radius: .2rem;
            background: rgba(238, 238, 238, 0.96);
            font-size:21px;
            text-align: center;
            line-height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body style="overflow-x: hidden">
<!--遮罩层-->
<div class="mask">
    <div class="alert">
        <p id="words">请先登录</p>
    </div>
</div>
<div id='pubBuy' style="display:block;">
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode onclick="history.back();">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title" >查看请求详情</div>
    <div class="aui-btn aui-pull-right" onclick="submit()">接单</div>
</header>

<section class="aui-content" style="margin-top: 45px">
<div class="aui-card-list">
    <div class="aui-card-list-header aui-card-list-user aui-border-b">
        <div class="aui-card-list-user-avatar" onclick="location.href='../find/friendInfo.html'">
            <img id="headImg"  class="aui-img-round" />
        </div>
        <div style="margin: 10px 0">
            <label style="font-size: 15px;" id="nickname"></label> <span class="fa fa-star" style="color: #FFC107"></span><span class="fa fa-star-o" style="color: #FFC107"></span><span class="fa fa-star-o" style="color: #FFC107"></span><span class="fa fa-star-o" style="color: #FFC107"></span><span class="fa fa-star-o" style="color: #FFC107"></span>
            <div class="aui-btn aui-btn-warning" style="float: right"><span class="fa fa-commenting-o"></span> 聊一下</div>
        </div>

    </div>
</div>
</section>
<!--商品店铺描述-->
<section class="aui-content" style="margin-top: -10px">
    <div class="aui-card-list-content-padded">
        <div class="disc"><span class="d1">· · · ❃ </span>
            <span style="font-family: 幼圆;">商品描述</span>
            <span class="d1"> ❃ · · ·</span>
        </div>
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input">
                        <textarea placeholder="请输入商品名称" id="tradeName" readonly></textarea>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-row aui-row-padded">
                    <div class="z_photo">
                        <div class="my-gallery" id="tradeImg">
                        </div>
                    </div>
                    </div>
            </li>
        </ul>
    </div>
    <div class="aui-card-list-content-padded ">
        <div class="disc"><span class="d1">· · · ❃ </span>
            <span style="font-family: 幼圆;">店铺描述</span>
            <span class="d1"> ❃ · · ·</span>
        </div>
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-input">
                        <textarea placeholder="请输入店铺名称" id="purchaseStore" readonly></textarea>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                        <div class="aui-row aui-row-padded">
                            <!--    照片添加    -->
                            <div class="z_photo">
                                <div class="my-gallery" id="purchaseImg">
                                </div>
                            </div>
                        </div>
            </li>
        </ul>
    </div>
    <div class="aui-card-list-content-padded aui-margin-b-15 aui-list-item-arrow" style="background: #fff;border-bottom: 1px solid #ddd">
        <div id="storeMap" style="margin: 0 0 10px 0;font-size: 15px;" ><span class="fa fa-map-marker" ></span><span style="margin-left: 10px"><input id="purchasePlace" style="border: 0;width: 80%" readonly></span></div>
    </div>
</section>
<!--收货地址-->
<section class="aui-content">
    <div class="aui-card-list aui-border-b">
         <div class="aui-card-list-content-padded"style="height: 80px">
            <div style="font-size: 14px" ><span>收货地</span>
                <span style="float: right;font-size: 13px;color:rgb(107, 107, 107) "><span id="contacts" style="padding-right: 3px"></span> <span id="contactsPhone"></span></span><br>
                <span style="float: right;color: rgb(161, 161, 161);font-size:13px" id="address" ></span><br>
                <span style="float: right;color:rgb(161, 161, 161) ;font-size:13px" id="addressDetails" ></span>
                </div>
            
        </div>
    </div>
</section>
<!--小费-->
<section class="aui-content money" >
    <div class="aui-card-list">
        <div class="aui-card-list-content-padded aui-border-b aui-border-t ">
            <div style="font-size: 15px;margin-bottom: 5px">
                <span>愿付小费</span>
                <input id="reward" style="width:80px;border:0;float: right;text-align: right;padding:3px 0px 0 0" readonly >
            </div>
        </div>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t ">
            <div style="font-size: 15px;margin-bottom: 5px">
                <span>预估商品金额</span>
                <input id="estimateThePrice" style="width:80px;border:0;float: right;text-align: right;padding:3px 0px 0 0" readonly>
            </div>
        </div>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t ">
            <div style="font-size: 15px">
                <span>快递费</span>
                <input id="courierFees" style="width:80px;border:0;float: right;text-align: right;padding:3px 0px 0 0" readonly >

            </div>
        </div>
    </div>
</section>
<!--时间-->
<section class="aui-content time">
    <div class="aui-card-list">
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div style="font-size: 15px" ><label >发布时间</label>
                <span style="float: right" id="demandCreatetime"></span>
            </div>
        </div>
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div style="font-size: 15px" ><label>期望送达时间</label>
                <span style="float: right" id="expectedArrivalTime"></span>
            </div>
        </div>
    </div>
</section>
<!--备注-->
<section class="aui-content">
    <div class="aui-card-list">
        <div class="aui-card-list-content-padded aui-border-b aui-border-t">
            <div style="font-size: 15px" ><span class="fa fa-tag"></span><span style="margin-left: 10px">备注</span>
                <ul class="aui-list aui-form-list">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-input" ><textarea id="note" style="font-size: 13px" ></textarea>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</section>
<!--留言板-->
<section class="aui-content" >
    <div class="aui-card-list">
        <ul class="aui-list aui-list-in" style="background: #f4f4f4;padding-bottom:5px ">
            <li class="aui-list-header">
                <span class="fa fa-comment-o"> <span style="font-size: 15px;font-family: 微软雅黑">留言板</span></span>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">小天才：这茶好喝吗?</div>
                    <div class="aui-list-item-right">8:00</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">小笨蛋<br>回复小天才：好喝</div>
                    <div class="aui-list-item-right">8:00</div>
                </div>
            </li>
            </ul>
        <div class=" aui-text-center" style="padding: 5px 0;font-size: 14px;color: #737373;background: rgba(76, 76, 76, 0.05)" onclick="location.href='messageBoard.html'">
            查看全部留言
        </div>
    </div>
</section><!--
<section class="aui-content" >
    <div class="aui-card-list">
        <div class="aui-btn aui-btn-success aui-btn-block aui-btn-outlined aui-btn-sm" tapmode onclick="openActionsheet()">我来接单</div>
    </div>
</section>-->
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
<!--遮罩层-->
<div class="z_mask">
    <!--弹出框-->
    <div class="z_alert">
        <p>接单成功<span class="fa fa-check"></span></p>
    </div>
</div>

<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript" src="../../AUI/script/aui-actionsheet.js" ></script>
    <script src="../../myJs/photoswipe.min.js"></script>
<script src="../../myJs/photoswipe-ui-default.min.js"></script>
<script type="text/javascript">
    var initPhotoSwipeFromDOM = function(gallerySelector) {

        // parse slide data (url, title, size ...) from DOM elements
        // (children of gallerySelector)
        var parseThumbnailElements = function(el) {
            var thumbElements = el.childNodes,
                    numNodes = thumbElements.length,
                    items = [],
                    figureEl,
                    linkEl,
                    size,
                    item;

            for (var i = 0; i < numNodes; i++) {

                figureEl = thumbElements[i]; // <figure> element

                // include only element nodes
                if (figureEl.nodeType !== 1) {
                    continue;
                }

                linkEl = figureEl.children[0]; // <a> element

                size = linkEl.getAttribute('data-size').split('x');

                // create slide object
                item = {
                    src: linkEl.getAttribute('href'),
                    w: parseInt(size[0], 10),
                    h: parseInt(size[1], 10)
                };



                if (figureEl.children.length > 1) {
                    // <figcaption> content
                    item.title = figureEl.children[1].innerHTML;
                }

                if (linkEl.children.length > 0) {
                    // <img> thumbnail element, retrieving thumbnail url
                    item.msrc = linkEl.children[0].getAttribute('src');
                }

                item.el = figureEl; // save link to element for getThumbBoundsFn
                items.push(item);
            }

            return items;
        };

        // find nearest parent element
        var closest = function closest(el, fn) {
            return el && (fn(el) ? el : closest(el.parentNode, fn));
        };

        // triggers when user clicks on thumbnail
        var onThumbnailsClick = function(e) {
            e = e || window.event;
            e.preventDefault ? e.preventDefault() : e.returnValue = false;

            var eTarget = e.target || e.srcElement;

            // find root element of slide
            var clickedListItem = closest(eTarget, function(el) {
                return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
            });

            if (!clickedListItem) {
                return;
            }

            // find index of clicked item by looping through all child nodes
            // alternatively, you may define index via data- attribute
            var clickedGallery = clickedListItem.parentNode,
                    childNodes = clickedListItem.parentNode.childNodes,
                    numChildNodes = childNodes.length,
                    nodeIndex = 0,
                    index;

            for (var i = 0; i < numChildNodes; i++) {
                if (childNodes[i].nodeType !== 1) {
                    continue;
                }

                if (childNodes[i] === clickedListItem) {
                    index = nodeIndex;
                    break;
                }
                nodeIndex++;
            }



            if (index >= 0) {
                // open PhotoSwipe if valid index found
                openPhotoSwipe(index, clickedGallery);
            }
            return false;
        };

        // parse picture index and gallery index from URL (#&pid=1&gid=2)
        var photoswipeParseHash = function() {
            var hash = window.location.hash.substring(1),
                    params = {};

            if (hash.length < 5) {
                return params;
            }

            var vars = hash.split('&');
            for (var i = 0; i < vars.length; i++) {
                if (!vars[i]) {
                    continue;
                }
                var pair = vars[i].split('=');
                if (pair.length < 2) {
                    continue;
                }
                params[pair[0]] = pair[1];
            }

            if (params.gid) {
                params.gid = parseInt(params.gid, 10);
            }

            return params;
        };

        var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
            var pswpElement = document.querySelectorAll('.pswp')[0],
                    gallery,
                    options,
                    items;

            items = parseThumbnailElements(galleryElement);

            // define options (if needed)
            options = {
                // define gallery index (for URL)
                galleryUID: galleryElement.getAttribute('data-pswp-uid'),
                getThumbBoundsFn: function(index) {
                    // See Options -> getThumbBoundsFn section of documentation for more info
                    var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                            pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                            rect = thumbnail.getBoundingClientRect();

                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                }

            };

            // PhotoSwipe opened from URL
            if (fromURL) {
                if (options.galleryPIDs) {
                    // parse real index when custom PIDs are used
                    // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                    for (var j = 0; j < items.length; j++) {
                        if (items[j].pid == index) {
                            options.index = j;
                            break;
                        }
                    }
                } else {
                    // in URL indexes start from 1
                    options.index = parseInt(index, 10) - 1;
                }
            } else {
                options.index = parseInt(index, 10);
            }

            // exit if index not found
            if (isNaN(options.index)) {
                return;
            }

            if (disableAnimation) {
                options.showAnimationDuration = 0;
            }

            // Pass data to PhotoSwipe and initialize it
            gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
            gallery.init();
        };

        // loop through all gallery elements and bind events
        var galleryElements = document.querySelectorAll(gallerySelector);

        for (var i = 0, l = galleryElements.length; i < l; i++) {
            galleryElements[i].setAttribute('data-pswp-uid', i + 1);
            galleryElements[i].onclick = onThumbnailsClick;
        }

        // Parse URL and open gallery if it contains #&pid=3&gid=1
        var hashData = photoswipeParseHash();
        if (hashData.pid && hashData.gid) {
            openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);
        }
    };

    // execute above function
    initPhotoSwipeFromDOM('.my-gallery');
</script>

<script>
    /*  var data = {
        "code":200,
        "msg":{
            "userId": 2,
            "nickname": "胖子",
            "headPortraitUrl": "../../myImage/5.png",
            "creditScore": 40,
            "tradeName": "抹茶星冰乐",
            "imageUrl": ["../../myImage/g1.jpg","../../myImage/g1.jpg","../../myImage/g1.jpg","../../myImage/g1.jpg","../../myImage/g1.jpg"],
            "purchaseImg": ["../../myImage/g2.jpg","../../myImage/g2.jpg"],
            "address": "钱江湾生活区",
            "address_details": "34幢111",
            "purchaseStore": "星巴克",
            "contacts": "哒哒",
            "contactsPhone": "17829382738",
            "reward": "12元",
            "estimateThePrice": "10元",
            "courierFees": "9元",
            "expectedArrivalTime": "10：30",
            "demandCreatetime":"10:00",
            "note":"要小姐姐接单",
            "storeLongitude":120.328206,
            "storeLatitude":30.309771,
            "purchasePlace":"星巴克咖啡(下沙龙湖店)"
        }
    } */
    var userId,demandId,lng,lat,lnglatXY,map, geolocation;

    $(function(){

        demandId = sessionStorage.getItem("demandId");
        userId = sessionStorage.getItem("userId");
        //alert(demandId);
        $.ajax({
         type: "post",
         url: '/randomdelivery/userPurchaseController/demandMessage',
         data: {
         "demandId": demandId
         },
         datatype: "json",
         success: function (data) {
        	 alert(JSON.stringify(data));
        	 orderDetail(data);
         }

         });
        //orderDetail(data);

    })

    /*var actionsheet = new auiActionsheet();
    function openActionsheet(){
        var tradeName = $("#tradeName").html();
        var expectedArrivalTime = $("#expectedArrivalTime").html();
        var reward = $("#reward").val();
        var estimateThePrice = $("#estimateThePrice").val();
        var courierFees = $("#courierFees").val();
        actionsheet.init({
            frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
            title:'<div class="aui-text-left" style="padding: 10px 0 10px 30px;line-height: 28px">\
            <div ><span>商品名称：</span><span >'+tradeName+'</span></div>\
            <div><span>期望送达时间：</span><span >'+expectedArrivalTime+'</span></div>\
            <div><span>小费：</span><span >'+reward+'</span></div>\
            <div><span>预估商品金额：</span><span>'+estimateThePrice+'</span></div>\
            <div><span>快递费：</span><span>'+courierFees+'</span></div>\
        </div>',
            cancelTitle:'确认接单'
        },function(ret){
            if(ret){

            }
        })
    }*/
    function orderDetail(data){
        //alert(data.user.nickname);
         var data = data.msg;
        $("#nickname").html(data.nickname);
        $("#headImg").attr("src",data.headPortraitUrl);
        $("#creditScore").html(data.creditScore);
        $("#tradeName").html(data.tradeName);
        $.each(data.tradeUrlArrayList,function(num,data){
            $("#tradeImg").append(' <figure>\
                <a href="'+data+'" data-size="800x1142">\
                <img style="width: 60px;height:60px;" src="'+data+'" >\
                </a>\
                </figure>');
        })
        
        $("#purchaseStore").html(data.purchaseStore);
        $.each(data.storeUrlArrayList,function(num,data) {
            $("#purchaseImg").append(' <figure>\
                <a href="' + data + '" data-size="800x1142">\
                <img style="width: 60px;height:60px;" src="' + data + '" >\
                </a>\
                </figure>');
        })
        $("#address").html(data.address);
        $("#addressDetails").html(data.addressDetails);
        $("#contacts").html(data.contacts);
        $("#contactsPhone").html(data.contactsPhone);
        $("#reward").val(data.reward);
        $("#courierFees").val(data.courierFees);
        $("#estimateThePrice").val(data.estimateThePrice);
        $("#demandCreatetime").html(data.demandCreatetime);
        $("#expectedArrivalTime").html(data.expectedArrivalTime+"前");
        $("#note").val(data.note);
        (data.purchasePlace==""?$("#purchasePlace").val("就近购买"):$("#purchasePlace").val(data.purchasePlace));
        
        sessionStorage.setItem("storeLongitude",data.storeLongitude);
        sessionStorage.setItem("storeLatitude",data.storeLatitude);

    }

     function submit(){
         if(userId==-1){
             $(".mask").show().delay(2000).hide(300,function(){
                 window.location.href="../system/login.html";
             });
         }else {
             //alert(demandId);
                     $.ajax({
              type: "post",
              url: '/randomdelivery/userPurchaseController/acceptSuccess',
              data: {
              "demandId": demandId
              },
              datatype: "json",
              success: function (data) {
               alert(JSON.stringify(data));
              $(".z_mask").show().delay(2000).hide(300,function(){
              sessionStorage.setItem("orderId", data.msg.orderId);
              window.location.href = "receivedOrder.html";
              })
              }
              });
            /*  $(".z_mask").show().delay(2000).hide(300,function(){
                 sessionStorage.setItem("orderId", 3);
                 window.location.href = "receivedOrder.html";
             }); */


         }
     }
     $("#storeMap").on("click",function(){
         location.href="../map/storeMap.html";
     })

</script>
</body>
</html>